aristath /
kirki
| Conditions | 19 |
| Paths | 32 |
| Total Lines | 128 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like wp.customize.Control.extend.initKirkiControl often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | /* global kirkiControlLoader */ |
||
| 19 | initKirkiControl: function() { |
||
| 20 | |||
| 21 | var control = this, |
||
| 22 | value = control.getValue(), |
||
| 23 | saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url', |
||
| 24 | preview = control.container.find( '.placeholder, .thumbnail' ), |
||
| 25 | previewImage = ( 'array' === saveAs ) ? value.url : value, |
||
| 26 | removeButton = control.container.find( '.image-upload-remove-button' ), |
||
| 27 | defaultButton = control.container.find( '.image-default-button' ); |
||
| 28 | |||
| 29 | control.container.find( '.kirki-controls-loading-spinner' ).hide(); |
||
| 30 | |||
| 31 | // Tweaks for save_as = id. |
||
| 32 | if ( ( 'id' === saveAs || 'ID' === saveAs ) && '' !== value ) { |
||
| 33 | wp.media.attachment( value ).fetch().then( function() { |
||
| 34 | setTimeout( function() { |
||
| 35 | var url = wp.media.attachment( value ).get( 'url' ); |
||
| 36 | preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + url + '" alt="" />' ); |
||
| 37 | }, 700 ); |
||
| 38 | } ); |
||
| 39 | } |
||
| 40 | |||
| 41 | // If value is not empty, hide the "default" button. |
||
| 42 | if ( ( 'url' === saveAs && '' !== value ) || ( 'array' === saveAs && ! _.isUndefined( value.url ) && '' !== value.url ) ) { |
||
| 43 | control.container.find( 'image-default-button' ).hide(); |
||
| 44 | } |
||
| 45 | |||
| 46 | // If value is empty, hide the "remove" button. |
||
| 47 | if ( ( 'url' === saveAs && '' === value ) || ( 'array' === saveAs && ( _.isUndefined( value.url ) || '' === value.url ) ) ) { |
||
| 48 | removeButton.hide(); |
||
| 49 | } |
||
| 50 | |||
| 51 | // If value is default, hide the default button. |
||
| 52 | if ( value === control.params['default'] ) { |
||
| 53 | control.container.find( 'image-default-button' ).hide(); |
||
| 54 | } |
||
| 55 | |||
| 56 | if ( '' !== previewImage ) { |
||
| 57 | preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' ); |
||
| 58 | } |
||
| 59 | |||
| 60 | control.container.on( 'click', '.image-upload-button', function( e ) { |
||
| 61 | var image = wp.media({ multiple: false }).open().on( 'select', function() { |
||
| 62 | |||
| 63 | // This will return the selected image from the Media Uploader, the result is an object. |
||
| 64 | var uploadedImage = image.state().get( 'selection' ).first(), |
||
| 65 | previewImage = uploadedImage.toJSON().sizes.full.url; |
||
| 66 | |||
| 67 | if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) { |
||
| 68 | previewImage = uploadedImage.toJSON().sizes.medium.url; |
||
| 69 | } else if ( ! _.isUndefined( uploadedImage.toJSON().sizes.thumbnail ) ) { |
||
| 70 | previewImage = uploadedImage.toJSON().sizes.thumbnail.url; |
||
| 71 | } |
||
| 72 | |||
| 73 | if ( 'array' === saveAs ) { |
||
| 74 | control.saveValue( 'id', uploadedImage.toJSON().id ); |
||
| 75 | control.saveValue( 'url', uploadedImage.toJSON().sizes.full.url ); |
||
| 76 | control.saveValue( 'width', uploadedImage.toJSON().width ); |
||
| 77 | control.saveValue( 'height', uploadedImage.toJSON().height ); |
||
| 78 | } else if ( 'id' === saveAs ) { |
||
| 79 | control.saveValue( 'id', uploadedImage.toJSON().id ); |
||
| 80 | } else { |
||
| 81 | control.saveValue( 'url', uploadedImage.toJSON().sizes.full.url ); |
||
| 82 | } |
||
| 83 | |||
| 84 | if ( preview.length ) { |
||
| 85 | preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' ); |
||
| 86 | } |
||
| 87 | if ( removeButton.length ) { |
||
| 88 | removeButton.show(); |
||
| 89 | defaultButton.hide(); |
||
| 90 | } |
||
| 91 | }); |
||
| 92 | |||
| 93 | e.preventDefault(); |
||
| 94 | }); |
||
| 95 | |||
| 96 | control.container.on( 'click', '.image-upload-remove-button', function( e ) { |
||
| 97 | |||
| 98 | var preview, |
||
| 99 | removeButton, |
||
| 100 | defaultButton; |
||
| 101 | |||
| 102 | e.preventDefault(); |
||
| 103 | |||
| 104 | control.saveValue( 'id', '' ); |
||
| 105 | control.saveValue( 'url', '' ); |
||
| 106 | control.saveValue( 'width', '' ); |
||
| 107 | control.saveValue( 'height', '' ); |
||
| 108 | |||
| 109 | preview = control.container.find( '.placeholder, .thumbnail' ); |
||
| 110 | removeButton = control.container.find( '.image-upload-remove-button' ); |
||
| 111 | defaultButton = control.container.find( '.image-default-button' ); |
||
| 112 | |||
| 113 | if ( preview.length ) { |
||
| 114 | preview.removeClass().addClass( 'placeholder' ).html( 'No file selected' ); |
||
| 115 | } |
||
| 116 | if ( removeButton.length ) { |
||
| 117 | removeButton.hide(); |
||
| 118 | if ( jQuery( defaultButton ).hasClass( 'button' ) ) { |
||
| 119 | defaultButton.show(); |
||
| 120 | } |
||
| 121 | } |
||
| 122 | }); |
||
| 123 | |||
| 124 | control.container.on( 'click', '.image-default-button', function( e ) { |
||
| 125 | |||
| 126 | var preview, |
||
| 127 | removeButton, |
||
| 128 | defaultButton; |
||
| 129 | |||
| 130 | e.preventDefault(); |
||
| 131 | |||
| 132 | control.saveValue( 'url', control.params['default'] ); |
||
| 133 | |||
| 134 | preview = control.container.find( '.placeholder, .thumbnail' ); |
||
| 135 | removeButton = control.container.find( '.image-upload-remove-button' ); |
||
| 136 | defaultButton = control.container.find( '.image-default-button' ); |
||
| 137 | |||
| 138 | if ( preview.length ) { |
||
| 139 | preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + control.params['default'] + '" alt="" />' ); |
||
| 140 | } |
||
| 141 | if ( removeButton.length ) { |
||
| 142 | removeButton.show(); |
||
| 143 | defaultButton.hide(); |
||
| 144 | } |
||
| 145 | }); |
||
| 146 | }, |
||
| 147 | |||
| 185 |
Loading history...
Since ECMAScript 6, you can create block-scoped vars or constants with the keywords
letorconst. These variables/constants are only valid in the code block where they have been declared.Consider the following two pieces of code:
and
The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.
To know more about this ECMA6 feature, look at the MDN pages on let and const.